<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html5绘图</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/weui/2.4.4/style/weui.min.css">
    <!-- script标签不要放在这里，如果引入的文件过大会造成堵塞,尽量放在最底下 -->
    <!-- 加了defer后script标签会延迟执行，先执行后面的DOM,script标签放在这里就没有问题 -->
    <!-- async允许并发执行，哪个标签先下载完就先执行哪个,defer还是会按照顺序执行 -->
    <script async src="./1.js"></script>
    <script async src="./2.js"></script>
</head>
<style>
    #canvas {
        background: #000;
    }
</style>

<body>
    <h1>asdas</h1>
    <script>
        console.log('阻塞');
    </script>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOMContentLoaded');
        })
    </script>
    <script>
        var canvas = document.getElementById('canvas'); //标签对象
        var context = canvas.getContext('2d'); //平面;webgl 3d 上下文句柄

        context.beginPath(); //开始路径
        context.arc(100, 100, 50, 0, Math.PI * 2, true)
        context.closePath(); //结束路径
        context.fillStyle = 'rgba(255, 255, 255)';
        context.fill()
    </script>
</body>

</html>